

<template>
  <div class="zhiyefazhan">
    <!-- 职业证书 -->
    <daiban id="daiban" name="职业证书"></daiban>
    <el-form ref="jyzsform" :model="jyzsform" label-width="80px">
      <div id="rongqi1">
        <div id="zhiyebook1" class="zhiyebook">
          <el-form-item label="证书名称" prop="zsmc">
            <el-input
              v-model="jyzsform.zsmc"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item label="授予单位" prop="sydw">
            <el-input
              v-model="jyzsform.sydw"
              placeholder="请输入"
              clearable
            ></el-input>
          </el-form-item>
          <el-form-item class="duan" label="获取时间" prop="hqsj">
            <div class="block">
              <el-date-picker
                v-model="jyzsform.hqsj"
                align="right"
                type="month"
                placeholder="选择日期"
                value-format="yyyy-MM"
                clearable
              >
              </el-date-picker>
            </div>
          </el-form-item>
        </div>
      </div>

      <el-button @click="copeitem('zhengshu')" class="addxueli"
        ><i>＋</i>添加</el-button
      >
      <el-form-item class="lastitem">
        <el-button @click="resetForm('jyzsform')">重置</el-button>
        <el-button class="cha" type="primary" @click="onSubmit('jyzsform')"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
    <!-- 职称晋升(职称) -->
    <daiban id="daiban" name="职称晋升"></daiban>
    <el-form ref="zcjsform" :model="zcjsform" label-width="80px">
      <div id="rongqi2">
        <div id="zhiyebook2" class="zhiyebook">
          <el-form-item label="职称名称" prop="zcmc">
            <el-select
              clearable
              v-model="zcjsform.zcmc"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in jinshengname1"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="获评时间" prop="hpsj">
             <div class="block">
              <el-date-picker
                v-model="zcjsform.hpsj"
                align="right"
                type="month"
                placeholder="选择日期"
                value-format="yyyy-MM"
                clearable
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item class="duan" label="受聘时间" prop="spsj">
              <div class="block">
              <el-date-picker
                v-model="zcjsform.spsj"
                align="right"
                type="month"
                placeholder="选择日期"
                value-format="yyyy-MM"
                clearable
              >
              </el-date-picker>
            </div>
          </el-form-item>
        </div>
      </div>

      <el-button @click="copeitem('zhicheng')" class="addxueli"
        ><i>＋</i>添加</el-button
      >
      <el-form-item class="lastitem">
        <el-button @click="resetForm('zcjsform')">重置</el-button>
        <el-button class="cha" type="primary" @click="onSubmit('zcjsform')"
          >保存</el-button>
      </el-form-item>
    </el-form>
    <!-- 职称晋升(职级) -->
    <daiban id="daiban" name="职级晋升"></daiban>
    <el-form ref="zjjsform" :model="zjjsform" label-width="80px">
      <div id="rongqi3" >
        <div id="zhiyebook3" class="zhiyebook">
          <el-form-item label="职级名称" prop="zjmc">
            <el-select
              clearable
              v-model="zjjsform.zjmc"
              filterable
              placeholder="请选择"
            >
              <el-option
                v-for="item in jinshengname2"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="获评时间" prop="hpsj">
            <div class="block">
              <el-date-picker
                v-model="zjjsform.hpsj"
                align="right"
                type="month"
                placeholder="选择日期"
                value-format="yyyy-MM"
                clearable
              >
              </el-date-picker>
            </div>
          </el-form-item>
          <el-form-item class="duan" label="受聘时间" prop="spsj">
           <div class="block">
              <el-date-picker
                v-model="zjjsform.spsj"
                align="right"
                type="month"
                placeholder="选择日期"
                value-format="yyyy-MM"
                clearable
              >
              </el-date-picker>
            </div>
          </el-form-item>
        </div>
      </div>

      <el-button @click="copeitem('zhiji')" class="addxueli"
        ><i>＋</i>添加</el-button
      >
      <el-form-item class="lastitem">
        <el-button @click="resetForm('zjjsform')">重置</el-button>
        <el-button class="cha" type="primary" @click="onSubmit('zjjsform')"
          >保存</el-button
        >
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import $ from "../../assets/jquery.min.js";
import daiban from "../../components/title/subTitle.vue";
import ajax from "../../api/ajax.js";
import qs from "qs";
export default {
  components: {
    daiban,
  },
  props: { cldgh: { type: String } },

  data() {
    return {
      //日期选择
      pickerOptions: {
        disabledDate(time) {
          return time.getTime() > Date.now();
        },
      },
      //职业证书数据
      jyzsform: {
        gh: "",
        hqsj: "",
        sydw: "",
        zsmc: "",
      },
      //职称晋升（职称）
      zcjsform: {
        gh: "",
        hpsj: "",
        spsj: "",
        zcmc: "",
      },
      //职称晋升（职级）
      zjjsform: {
        gh: "",
        hpsj: "",
        spsj: "",
        zjmc: "",
      },
      //职称名称
      jinshengname1: [
        { value: "助教", label: "助教" },
        { value: "讲师", label: "讲师" },
        { value: "副教授", label: "副教授" },
        { value: "教授", label: "教授" },
      ],
      //职级名称
      jinshengname2: [
        { value: "六级", label: "六级" },
        { value: "五级", label: "五级" },
        { value: "四级", label: "四级" },
        { value: "三级", label: "三级" },
        { value: "二级", label: "二级" },
        { value: "一级", label: "一级" },
      ],
    };
  },
  methods: {
    //重置
    resetForm(form) {
      this.$refs[form].resetFields();
    },
    //提交
    onSubmit(formName) {
      this.$refs[formName].validate(async (valid) => {
        if (valid) {
          if (formName == "jyzsform") {
            this.jyzsform.gh = this.cldgh;
            if (this.jyzsform.gh == "" || undefined) {
              this.$message.error("请先添加老师的基本信息");
            } else {
              const result = await ajax(
                "/zyzs",
                qs.stringify(this.jyzsform),
                "post"
              );
              console.log(this.jyzsform, "------", result);

              alert("这是职业证书");
            }
          }
          if (formName == "zcjsform") {
            this.zcjsform.gh = this.cldgh;
            if (this.zcjsform.gh == "" || undefined) {
              this.$message.error("请先添加老师的基本信息");
            } else {
              const result = await ajax(
                "/zcjs",
                qs.stringify(this.zcjsform),
                "post"
              );
              console.log(this.zcjsform, "------", result);

              alert("这是职称晋升");
            }
          }
          if (formName == "zjjsform") {
            this.zjjsform.gh = this.cldgh;
            if (this.zjjsform.gh == "" || undefined) {
              this.$message.error("请先添加老师的基本信息");
            } else {
              const result = await ajax(
                "/zjjs",
                qs.stringify(this.zjjsform),
                "post"
              );
              console.log(this.zjjsform, "------", result);
              alert("这是职级晋升");
            }
          }
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    //添加
    copeitem(type) {
      if (type == "zhengshu") {
        console.log(444);
        const $orig = $("#zhiyebook1:first").clone(true);
        $("#rongqi1").append($orig);
      }
      if (type == "zhicheng") {
        const $orig = $("#zhiyebook2:first").clone(true);
        $("#rongqi2").append($orig);
      }
      if (type == "zhiji") {
        const $orig = $("#zhiyebook3:first").clone(true);
        $("#rongqi3").append($orig);
      }
    },
  },
};
</script>

<style lang="less" scoped>
.zhiyefazhan {
  width: 100%;
  height: 768px;
  overflow: auto;

  .el-form {
    background-position: bottom;
    background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.192) 0%,
      rgba(0, 0, 0, 0.192) 50%,
      transparent 50%
    );
    background-size: 18px 1px;
    background-repeat: repeat-x;
    margin-top: 8px;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-left: 33px;
    margin-right: 36px;
    .el-form-item {
      margin-left: 4px;
      width: 380px;
    }
    .lastitem {
      width: 94%;
      display: flex;
      justify-content: center;
      margin-left: 0;
    }
    .addxueli,
    .addyanxiu {
      margin-bottom: 20px;
      border: 1px dashed #ccc;
      width: 100%;
      height: 40px;
      background: #fafafa;
    }
    .addxueli:hover,
    .addyanxiu:hover {
      border: 1px dashed #409eff;
    }
  }
}
.zhiyebook {
  position: relative;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  width: 100%;
  height: 70px;
  margin-bottom: 10px;
  flex-wrap: wrap;
  align-items: center;
  border-radius: 4px;
  .el-form-item__label {
    width: 80px;
  }
  div {
    margin-bottom: 0;
  }
}
.duan {
  width: 380px !important;
}
#rongqi1,
#rongqi2,
#rongqi3 {
  width: 100%;
}
.zhiyebook:hover {
  background: #064cb425;
}
</style>